import React, { useState } from 'react';
import { MediumOutlined, UserOutlined } from '@ant-design/icons';
import { NavBar, Icon, Drawer, List } from 'antd-mobile';
import styles from './index.less';
import { history } from 'umi';

export default function(props: any) {
  const { children } = props;

  const [open, setOpen] = useState(false);

  const sidebar = (
    <List className={styles.sidebar}>
      <List.Item arrow="horizontal">音乐馆</List.Item>
      <List.Item arrow="horizontal">排行榜</List.Item>
      <List.Item arrow="horizontal">歌单</List.Item>
      <List.Item arrow="horizontal">主播电台</List.Item>
      <List.Item arrow="horizontal">歌手</List.Item>
      <List.Item arrow="horizontal">新碟上架</List.Item>
    </List>
  );

  let toSearch = () => {
    history.push({
      pathname: '/mobile/search',
    });
  };

  return (
    <div>
      <NavBar
        className={styles.navBar}
        mode="light"
        rightContent={[
          <Icon
            key="0"
            type="search"
            className={styles.search}
            onClick={() => {
              toSearch();
            }}
          />,
          <Icon
            key="1"
            type="ellipsis"
            onClick={() => {
              setOpen(!open);
            }}
          />,
        ]}
      >
        Free Music
      </NavBar>

      <Drawer
        className={styles['my-drawer']}
        style={{ minHeight: document.documentElement.clientHeight }}
        enableDragHandle
        contentStyle={{ color: '#A6A6A6', textAlign: 'center', paddingTop: 42 }}
        open={open}
        position="right"
        sidebar={sidebar}
        onOpenChange={() => {
          setOpen(!open);
        }}
      >
        <div className={styles.content}>{children}</div>
      </Drawer>
    </div>
  );
}
